<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@include file="/WEB-INF/base.jspf"%>
<!DOCTYPE html>
<html>
<head>
<title>轮播图片管理</title>
<style>
	.div-c-controlBtns {
		display:flex;
		justify-content:flex-end;
		margin-bottom:16px;
	}
		.modal-dialog {
		max-width: 1000px;
	}
	.div-c-controlBtns button + button {
		margin-left:8px;
	}
	.p-c-flexwrapper {
		display:flex;
		align-items:center;
		margin-right:16px;
		margin-bottom:16px;
	}
	.p-c-flexwrapper > span {
		width:112px;
	}
	.p-c-flexwrapper > .form-control {
		width:180px;
	}
	#addAndEditModal .modal-body {
		display:flex;
		flex-wrap:wrap;
	}
	.bootstrap-background {
	    color: #fff;
	    display: inline-block;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: middle;
	    border: 1px solid transparent;
	    padding: 5px 10px;
	    line-height: 1.5;
	    border-radius: 3px;
	    font-size: 12px;
	    cursor: default;	
	}
	.bootstrap-background.info {
		 background-color: #5bc0de;
   		 border-color: #46b8da;
	}
	.bootstrap-background.success {
		background-color: #5cb85c;
	    border-color: #4cae4c;
	}
	.bootstrap-background.all {
		background-color: rgb(65,139,202);
	    border-color: rgb(65,139,202);
	}	
	.img-c-smallPic {
		max-width:60px;
		max-height:60px;
		cursor: pointer;
	}		
	.pic-noticeText {
		display:none;
		margin: 0 16px;
	}
	.pic-noticeText.active {
		display:block;
	}
	.btn-del-prevPhoto {
		cursor: pointer;
		text-decoration: underline;
		color:#5188b9;
	}
</style>
</head>
<body>
<!-- <div class="switch" data-on-label="SI" data-off-label="NO"> -->
<!-- </div> -->
	<div class="div-c-controlBtns" style="display:flex;justify-content:flex-start;">
		<button class="btn btn-primary" id="button-i-addNewZongDaiLi">新增</button>
	</div>
<table id="table-i-cunkuanList" class="table table-striped table-bordered table-hover">
		<thead>
			<tr>
				<th style="display:none;"></th>
				<th>轮播标题</th>
				<th>轮播类型</th>
				<th>轮播图片1</th>
				<th>轮播图片2</th>
				<th>轮播图片3</th>
				<th>轮播图片4</th>
				<th>轮播图片5</th>
				<!-- <th>状态</th> -->
				<th>发布时间</th>
				<th>发布人</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<!-- <tr>
				<td>1</td>
				<td>0</td>
				<td>1.2</td>
				<td></td>
				<td>2</td>
				<td>aaaaaa</td>
				<td></td>
				<td></td>
				<td><button class="btn btn-primary btn-control-startOrBan btn-sm">禁用</button></td>
				<td></td>
			</tr> -->
		</tbody>
	</table>		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog" style="width:700px;">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		            </div>
		            <form  action="" enctype="multipart/form-data" method="post" style="padding:0 10px;">
			            <div class="modal-body">
			            	<input id="input-i-id" name="id" hidden="hidden" class="input-auto" />
			            	<p class="p-c-flexwrapper"><span>轮播标题：</span><input name="pictureName" id="input-i-pictureName" required class="input-auto form-control" /></p>
			            	<p class="p-c-flexwrapper"><span>类型：</span>
			            	<input id="select-i-pictureType" name="pictureType" required class="input-auto form-control" name="type" />
			            	</p>
			            </div>
			            <p class="pic-noticeText" style="font-weight:bold;color:red;">注：在修改的情况下，如不选择新的图片，则默认保留原有的图片，如选择新的图片，则会替换原有的图片</p>
			            <span>图片1</span><input onchange='PreviewImage(this, 1)' name="file1" class="input-c-choosePic" id="input-i-filePic1" type="file" style="margin-left:6px;display:inline-block;" />
			            <img class="img-view-photo" id="img-i-loadPic1" src="" style="margin:10px auto; max-width:96%;max-height:500px;display:block;" />
			            <span>图片2</span><input onchange='PreviewImage(this, 2)' name="file2" class="input-c-choosePic" id="input-i-filePic2" type="file" style="margin-left:6px;display:inline-block;" />
			            <img class="img-view-photo" id="img-i-loadPic2" src="" style="margin:10px auto; max-width:96%;max-height:500px;display:block;" />
			            <span>图片3</span><input onchange='PreviewImage(this, 3)' name="file3" class="input-c-choosePic" id="input-i-filePic3" type="file" style="margin-left:6px;display:inline-block;" />
			            <img class="img-view-photo" id="img-i-loadPic3" src="" style="margin:10px auto; max-width:96%;max-height:500px;display:block;" />
			            <span>图片4</span><input onchange='PreviewImage(this, 4)' name="file4" class="input-c-choosePic" id="input-i-filePic4" type="file" style="margin-left:6px;display:inline-block;" />
			            <img class="img-view-photo" id="img-i-loadPic4" src="" style="margin:10px auto; max-width:96%;max-height:500px;display:block;" />
			            <span>图片5</span><input onchange='PreviewImage(this, 5)' name="file5" class="input-c-choosePic" id="input-i-filePic5" type="file" style="margin-left:6px;display:inline-block;" />
			            <img class="img-view-photo" id="img-i-loadPic5" src="" style="margin:10px auto; max-width:96%;max-height:500px;display:block;" />
		            </form>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitZongDaiLi">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>  


<!-- 模态框（Modal） -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">你确定要删除该组轮播图吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="btn-i-delModalBtn">删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>	

<!-- 模态框（Modal） -->
<div class="modal fade" id="deletePhoneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">你确定要删除该张图吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="btn-i-delPhotoModalBtn">删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>	
 			
	<script type="text/javascript" src="/js/zhengzeTools.js"></script>
	<script>
	var type_obj = {
/* 			"0": {"classN": "success", "text": "新用户"},
			"1": {"classN": "info", "text": "老用户"},
			"2": {"classN": "all", "text": "所有用户"}, */
	}
	
	var baseUrl = "<%=basePath %>"
	bindDelItemEvent("#table-i-cunkuanList", ".btn-c-deleteZongDaiLiInfo", "delIndexPicture.do")
	function PreviewImage(imgFile, index) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)|(\.*.JPG$)|(\.*.PNG$)|(\.*.JPEG$)|(\.*.GIF$)|(\.*.BMP$)/;
		if (!pattern.test(imgFile.value)) {
			showNoticeModal("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");
			$("#img-i-loadPic" + index).attr("src", "")
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("img-i-loadPic" + index).innerHTML = "";
				document.getElementById("img-i-loadPic" + index).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("img-i-loadPic" + index).src = path
			}
		}
	}	
	
	//delIndexPictures
	$("#table-i-cunkuanList").on("click", ".btn-del-prevPhoto", function(e) {
		e.preventDefault()
		var $self = $(e.currentTarget)
		var $tr = $self.closest("tr")
		$("#deletePhoneModal").attr("data-id", $tr.find(".id-edit-td").text())
		$("#deletePhoneModal").attr("data-index", $self.prev().attr("data-path"))
		$("#deletePhoneModal").modal("show")
	})
	
	$("#btn-i-delPhotoModalBtn").on("click", function(e) {
		var urlPath = "delIndexPictures.do"
			var newRequest = {
				url: urlPath,
				type: "post",
				data: 
					{
						"id": $("#deletePhoneModal").attr("data-id"),
						"countPicture": $("#deletePhoneModal").attr("data-index")
					},
				success: function(data) {
					$("#deletePhoneModal").modal("hide")
					showNoticeModal("删除成功！")
					$("#table-i-cunkuanList").DataTable().ajax.reload()
				},
				error: function(status) {
					console.log("status", status)
				}
			}
			ajax(newRequest)		
	})
	
	$("#table-i-cunkuanList").DataTable({
	      // "bPaginate": true,
	      "bLengthChange": true,      
	      "bSort": false,
	      // "bInfo": true,
	      "bAutoWidth": false,
//		         "bServerSide":true,
	      'aLengthMenu':[5, 20],
	       "searching": false,
	       "dom": "ftp",
//		    "searching": true,l
	       "language": {//语言设置  
	            "lengthMenu": "每页显示 _MENU_ 条记录",     
	            "zeroRecords": "没有检索到数据",     
	            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "前一页",     
	                "sNext": "后一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"搜索:",
	            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
	            "infoEmpty":      "没有找到匹配的信息",
	         },
	         "drawCallback": function( settings ) {
	        	 $(".input-c-mySwitch").bootstrapSwitch()
	         },
	         "ajax": {
	        	 "type": "POST",
	        	 "url": "allIndexPicture.do",
 	        	 "dataSrc": function(json) {
	        		 var newJson = json.data
	        		 for (var i = 0; i < newJson.length; i++) {
	         			 var item = newJson[i]
	         			 var stateValue = ""
	        		/* 	 if (item.pictureState == "1") {
	        				 stateValue = "checked"
	        			 } else {
	        				 stateValue = ""
	        			 } */
	         			//item.typeValue = item.type
         				//item.type = "<span class='bootstrap-background " + type_obj[item.type].classN + "'>" + type_obj[item.type].text + "</span>"
	        		 /* 	item.pictureState = "<input class='input-c-mySwitch' data-size='small' type='checkbox' " + stateValue + " data-on-text='启用' data-on-color='success' data-off-color='danger' data-off-text='禁用' />" */
	        		 	 for (var z = 1; z < 6; z++) {
	        		 		if (item["picturePath" + z] === "") {
	        		 			continue
	        		 		}
	        		 		item["picturePath" + z] = "<a data-path='picturePath" + z + "' href='/d/cp/" + item["picturePath" + z] + "' target='_blank'><img src='/d/cp/" + item["picturePath" + z] + "' class='img-c-smallPic' /></a> <a class='btn-del-prevPhoto' style='margin-left:16px;'>删除</a>"
	        		 	}
	        		 }
	        		 //console.log("newJSON", newJson)
	        		 return newJson
	        	 }, 
	         },
 	         "columns": [
						 {"data": "id", "className": "hidden-td id-edit-td"},
	                     {"data": "pictureName", "className": "pictureName-edit-td" },
	                     {"data": "pictureType", "className": "pictureType-edit-td"},
	                     {"data": "picturePath1", "className": "picturePath1-edit-td"},
	                     {"data": "picturePath2", "className": "picturePath2-edit-td" },
	                     {"data": "picturePath3", "className": "picturePath3-edit-td" },
	                     {"data": "picturePath4", "className": "picturePath4-edit-td" },
	                     {"data": "picturePath5", "className": "picturePath5-edit-td" },
	                     /* {"data": "pictureState",}, */
	                     {"data": "createTime", "className": "createTime-edit-td" },
	                     {"data": "updateName", },
	                     {"data": null, "defaultContent": "<button class='btn btn-warning btn-c-editZongDaiLiInfo btn-sm'>修改</button><button class='btn btn-danger btn-c-deleteZongDaiLiInfo btn-sm' style='margin-left:16px;'>删除</button>"},
	                 ]       
	   		 })	
		$("#button-i-addNewZongDaiLi").on("click", function(event) {
			$("#addAndEditModal").attr("data-type", "add")
			$("#addAndEditModal").modal("show")
		})	   		 
		bindJinYongQiYongSwitch("#table-i-cunkuanList", "updIndexPictureState.do", "state")
		$('#addAndEditModal').on('hidden.bs.modal', function () {
			if ($("#addAndEditModal").attr("data-type") == "edit") {
				$("#addAndEditModal form")[0].reset()
				$(".pic-noticeText").removeClass("active")
			}
			$(".img-view-photo").attr("src", "")
		})	
		$("#table-i-cunkuanList").on("click", ".btn-c-editZongDaiLiInfo", function(event) {
			$("#addAndEditModal").attr("data-type", "edit")
			var $parentTr = $(event.target).closest("tr")
			$("#addAndEditModal .input-auto").each(function(index, element) {
				$(element).val($parentTr.find("." + element.id.split("-")[2] + "-edit-td").text())
			})
			for (var i = 1; i < 6; i++) {
				var srcSelector = $parentTr.find(".picturePath" + i + "-edit-td").find("img")
				if (srcSelector.length === 0) {
					continue
				}
				$("#img-i-loadPic" + i).attr("src", srcSelector.attr("src"))
			}
			$(".pic-noticeText").addClass("active")
			$("#addAndEditModal").modal("show")
		})
		
		
		$("#table-i-zongdailiList").on("click", ".btn-control-startOrBan", function(event) {
		}) 

		var obj = {
			btnName: "#button-i-submitZongDaiLi",
			divName: "#addAndEditModal",
			callback: function() {
				var now = new Date().getTime() / 1000
				var time1 = new Date($("#input-i-startDate").val()).getTime() / 1000
				if (time1 < now) {
					return "开始时间不得小于当前时间"
				}
				var type = $("#addAndEditModal").attr("data-type")
				if (type === "add") {
					var index = 0
					var allInputs = $(".input-c-choosePic")
					for (var i = 0; i < allInputs.length; i++) {
						var item = allInputs[i]
						if (item.value === "") {
							index += 1
						}
					}
					if (index === 5) {
						return "请至少上传 1 张图片"
					}
				}
				return "ok"
			},
		}
		
		var ajaxObj = {
			"add": "addIndexPicture.do",	
			"edit": "updIndexPicture.do",
		}
		
		checkFormMethod(obj, function() {
			var type = $("#addAndEditModal").attr("data-type")
 			/* if (type == "edit") {
				newRequest.data.id = $("#input-i-id").val()
 			} */	
 			$("#addAndEditModal form").attr("action", ajaxObj[type])
			$("#addAndEditModal form")[0].submit()
					/*} else {
				newRequest.data.beginTime = $("#input-i-startDate").val()
				newRequest.data.endTime = $("#input-i-endDate").val()		
			} */
		})		
		$("#addAndEditModal").on("shown.bs.modal", function(e) {
			$(".input-c-choosePic").val("")
			//$("#img-i-loadPic").attr("src", "")
		})
	</script>
</body>
</html>